<template>
  <div>
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :sapn="24">
            <div>
              <el-card class="box-background-color-black lucency-sm">

                <el-alert
                        title="您还没有登录 , 请登录后再进行操作!!"
                        type="info"
                        :closable="false"
                        show-icon>
                </el-alert>
                <el-row class="text-align-right">
                  <el-button type="primary" size="medium" @click="showLoginUserForm" class="margin-top-10">登录</el-button>
                  <el-button type="info" size="medium" class="margin-top-10" @click="showRegisterUserForm">注册</el-button>
                </el-row>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>


    <!--注册用户对话框-->
    <el-dialog
            title="注册用户"
            :visible.sync="registerUserDialogVisible"
            width="50%"
            :before-close="registerHandleClose">

      <!--表单-->
      <el-form>
        <el-form :label-position="'left'" :rules="rules" ref="registerUserForm" label-width="80px" :model="userForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="userForm.password2" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
        </el-form>
      </el-form>

      <!--操作-->
      <span slot="footer" class="dialog-footer">
          <el-button @click="registerUserDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="register">注册并登录</el-button>
      </span>
    </el-dialog>

    <!--登录对话框-->
    <el-dialog
            title="登录"
            :visible.sync="loginUserDialogVisible"
            width="50%"
            :before-close="loginHandleClose">

      <!--表单-->
      <el-form>
        <el-form :label-position="'left'" :rules="rules" ref="loginUserForm" label-width="80px" :model="loginForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>
        </el-form>
      </el-form>

      <!--操作-->
      <span slot="footer" class="dialog-footer">
          <el-button @click="loginUserDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="login">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      // 确认密码验证
      var validatePassword = (rule , value , cb) => {
        if (value != this.userForm.password) {
          cb(new Error('两次密码不一致'))
        }else {
          cb()
        }
      };
      // 合法邮箱验证
      var validateEmail = (rule , value , cb) => {
        const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

        if (regEmail.test(this.userForm.email)) {
          cb()
        }else {
          cb(new Error('请输入正确邮箱'))
        }
      };
      return {
        // 控制注册用户对话框的显示与否
        registerUserDialogVisible: false,
        loginUserDialogVisible: false,
        userForm: {
          username: '',
          password: '',
          password2: '',
          email: '',
        },
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
          ],
          password2: [
            {required: true, message: '请再次输入密码', trigger: 'blur'},
            {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'},
            {validator: validatePassword , trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {validator: validateEmail , trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      // 注册用户对话框被关闭
      registerHandleClose() {
        this.registerUserDialogVisible = false
      },
      loginHandleClose() {
        this.loginUserDialogVisible = false
      },
      // 展示对话框
      showRegisterUserForm() {
        this.registerUserDialogVisible = true
      },
      showLoginUserForm() {
        this.loginUserDialogVisible = true
      },
      register() {
        // 表单验证
        this.$refs.registerUserForm.validate(valid => {
          if (!valid) return
          this.$http.post(`/register`,this.userForm).then(result => {
            if (result.data.meta.status !== 200) {
              return this.$message.error(result.data.meta.message)
              this.registerUserForm.resetFields()
            }else {
              // 注册隐藏
              this.registerUserDialogVisible = false
              // 账户密码绑定
              this.loginForm.username = this.userForm.username
              this.loginForm.password = this.userForm.password
              // 登录
              this.loginRequest()
              return this.$message.success(result.data.meta.message)
            }
          });
        })
      },
      login() {
        this.$refs.loginUserForm.validate(valid => {
          if (!valid) return
          this.loginRequest()
        })
      },
      loginRequest() {
        this.$http.post(`/login`,this.loginForm).then(result => {
          console.log(result);
          if (result.data.meta.status !== 200) return this.$message.error(result.data.meta.message)
          console.log(result.data.data.token);
          // 保存token
          if (!result.data.token){

            window.sessionStorage.setItem("token",result.data.data.token)
          }
          this.$message.success(result.data.meta.message)
          this.$router.push("/home")
        })
      }
    }
  }
</script>

<style scoped>
  .el-card{
    border: none;

  }
</style>